<template id="qm-button">
  <f7-button
    class="button"
    :class="classObject"
    :fill="isFill"
    :round="round"
    :outline="!isFill"
    :disabled="disabled"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div class="title">
      <div>{{title}}</div>
      <div class="subTitle" v-if="subTitle && size !== 'mini'">{{subTitle}}</div>
    </div>
  </f7-button>
</template>

<script>
export default {
  inheritAttrs: true,
  props: {
    title: {
      typeof: String,
      default: "",
    },
    subTitle: {
      typeof: String,
      default: "",
    },
    type: {
      typeof: String,
      default: (value) => {
        if (["primary", "default", "warn"].indexOf(value) !== -1) {
          return value;
        }
        return "default";
      },
    },
    size: {
      typeof: String,
      default: (value) => {
        if (["default", "small", "smaller", "mini"].indexOf(value) !== -1) {
          return value;
        }
        return "default";
      },
    },
    // 是否填充
    fill: {
      type: Boolean,
      default: false,
    },
    // 是否为圆角
    round: {
      type: Boolean,
      default: true,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classObject() {
      return {
        primary: this.type === "primary",
        warn: this.type === "warn",
        small: this.size === "small",
        smaller: this.size === "smaller",
        mini: this.size === "mini",
        fill: this.fill && (this.type === "primary" || this.type === "warn"),
        round: this.round,
        disabled: this.disabled,
        haveSubTitle: this.subTitle && this.size !== "mini",
      };
    },
    isFill() {
      if (!(this.fill && (this.type === "primary" || this.type === "warn"))) {
        return false;
      }
      return true;
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.button {
  --f7-button-outline-border-color: var(--color-divider-line);
  color: var(--color-text-title);
  height: calc(96px * var(--ratio));
  max-width: 100%;
  line-height: normal;
  box-sizing: border-box;
  font-weight: 400;
  .title {
    height: 100%;
    width: 100%;
    font-size: var(--font-size-maintitle);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    .subTitle {
      font-size: var(--font-size-subcontent-2);
      opacity: 0.6;
    }
  }
}
.haveSubTitle {
  height: calc(129px * var(--ratio));
}
.fill {
  color: var(--color-text-base) !important;
}
.small {
  max-width: calc(544px * var(--ratio));
}
.smaller {
  max-width: calc(331px * var(--ratio));
}
.mini {
  width: calc(152px * var(--ratio));
  height: calc(52px * var(--ratio));
  padding-left: 0;
  padding-right: 0;
  .title {
    font-size: var(--font-size-subcontent);
  }
}
.primary {
  --f7-button-fill-pressed-bg-color: var(--color-brand);
  --f7-button-outline-border-color: var(--color-brand);
  --f7-button-fill-bg-color: var(--color-brand);
  color: var(--color-text-primary);
}
.info {
  --f7-button-fill-pressed-bg-color: var(--color-divider-line);
  --f7-button-outline-border-color: var(--color-divider-line);
  color: var(--color-text-title);
}
.warn {
  --f7-button-fill-pressed-bg-color: var(--color-fill-wrong);
  --f7-button-outline-border-color: var(--color-fill-wrong);
  --f7-button-fill-bg-color: var(--color-fill-wrong);
  color: var(--color-fill-wrong);
}
</style>
